<template>
    <div class="box">
        <header>
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel">
                <template #left>
                    <van-icon name="arrow-left" size="20" @click="$router.go(-1)" />
                </template>
            </van-search>
        </header>
        <div class="content">
            <div v-for="item in list" :key="item.id">
                <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </div>

        </div>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            value: '',
            list: []
        }
    },
    created() {
        this.query()
    },
    methods: {
        onSearch() {
            this.query()
        },
        onCancel() {
            this.query()
        },
        // 封装请求数据的函数
        query() {
            request.get('/query', { params: { value: this.value } }).then(res => {
                if (res.data.code == 200) {
                    this.list = res.data.list
                }
            })
        }
    }
}
</script>